<template>
  <Scroll
    ref="scroll"
    :updateData="[list]"
    :refreshData="[]"
    @pullingDown="loadRefresh"
    @pullingUp="loadMore">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      <li v-show="list.length > 20" style="color: #1F8CEB" @click="scrollToTop">点我回到顶部</li>
    </ul>
  </Scroll>
</template>

<script>
import { Scroll } from '&'
import { timeout } from '@/utils/util'

export default {
  name: 'App',
  components: {
    Scroll,
  },
  data () {
    return {
      list: [],
      page: 1,
      pageSize: 10,
    }
  },
  mounted () {
    this.loadRefresh()
  },
  methods: {
    // 滚动到顶部
    scrollToTop () {
      this.$refs.scroll.scrollTo(0, 0)
    },
    // 加载刷新数据
    async loadRefresh () {
      const data = await this._fetchList()

      // 初始化数据
      this.list = data
      this.page = 1
    },
    // 加载更多数据
    async loadMore () {
      const page = this.page + 1
      const data = await this._fetchList(page)

      this.list.push(...data)
      data.length < this.pageSize ? this.$refs.scroll.update(true) : this.page++ // 判断是否已达最后一页?如果已是最后一页，可调用this.$refs.scroll.update(true)声明已是最后一页。下拉刷新后该值会自动false，也可调用 this.$refs.scroll.update(false) 手动声明不是最后一页
    },

    // 模拟一个异步获取列表操作
    async _fetchList (page = 1, pageSize = this.pageSize) {
      try {
        await timeout(1000)

        if (page < 3) {
          // 模拟数据返回
          return Array.from({ length: pageSize }, (value, index) => `第${page}页的数据${index}`)
        } else {
          // 模拟已到达最后一页时的数据返回
          return Array.from({ length: pageSize / 2 }, (value, index) => `最后一页,第${page}页的数据${index}`)
        }
      } catch (e) {
        return false
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/stylus/import.styl';

ul {
  padding: 0;
  margin: 0;
  li {
    background: #fff;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
}
</style>
